<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: boBrother
 * @LastEditTime: 2022-01-06 11:54:23
-->
<template>
  <div id="right1Container" ref="right1Container" style="height: 95%"></div>
</template>
 <script>
// 导入图表
import { get } from "@/utils/request.js";
import { Area } from "@antv/g2plot";
import moment from "moment";

export default {
  data() {
    return {
      deviceData: [],
      params: {
        page: 1,
        pageSize: 50,
      },
      chart: null,
      // data: [],
    };
  },
  computed: {
    chartData() {
      return this.deviceData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          humidity: parseFloat(item.humidity),
        };
      });
    },
  },
  methods: {
    // 图表初始化方法
    loadCharts() {
      // 判断图表是否存在，如果存在，先销毁
      if (this.chart) {
        this.chart.destroy();
      }
      // 第一步生成图表实例，并配置配置项
      this.chart = new Area(this.$refs["right1Container"], {
        data: this.chartData,
        padding: "auto",
        xField: "date",
        yField: "humidity",
        smooth: true,
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
        },
        yAxis: {
          label: {
            style: {
              fill: "rgba(255,255,255,.7)",
            },
          },
          grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
        },
        // smooth: true,
      });
      // console.log(data);
      // 第二步：开始绘制图表
      this.chart.render();
      // console.log(this.chartData);
    },
    // 检索设备数据
    queryTodayData() {
      get("/dashboard/pageQueryData", {
        ...this.params,
        device_id: 28,
      }).then((res) => {
        // console.log(res.data.list);
        this.deviceData = res.data.list;
        this.loadCharts();
      });
    },
  },
  // vue实例完全挂载到页面上
  mounted() {
    this.queryTodayData();

    // this.loadCharts();

    setInterval(() => {
      // this.loadCharts();
      this.queryTodayData();
    }, 6000);
    // this.initChart();
  },
  created() {},
};
</script>
